<template>
  <div class="px-60 mx-auto bg-[#5D5098]" id="div-1">
    <a-flex vertical="column" class="!bordr-0 pb-4 bg-[#fff]" id="a-flex-1">
      <a-row class="!mx-0 pb-3" :gutter="20" id="a-row-1">
        <a-col :span="11" class="!pl-0" id="a-col-1">
          <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-1">
            <a-image width="100%" class="!h-[400px]" src="https://picsum.photos/id/11/1000/800" :preview="false" id="a-image-1" />
            <a-typography-paragraph
              class="!mb-0 absolute bottom-0 inset-x-0 bg-black/30 text-white pt-1 pl-3 pb-1 text-lg"
              id="a-typography-paragraph-1"
            >
              自然声DAC-2换胆记
            </a-typography-paragraph>
          </a-typography-link>
        </a-col>
        <a-col :span="13" id="a-col-2">
          <a-flex vertical="column" class="my-[20px]" id="a-flex-2">
            <a-typography-title :level="5" class="!text-[#5D5098]" id="a-typography-title-1"
              >专业全能，飞傲 FIO 串流解码一体机S15正式上市!</a-typography-title
            >
            <a-typography-paragraph
              class="text-[12px] text-[#A8ACA7] overflow-hidden text-ellipsis mt-[20px] !m-0"
              :ellipsis="{ rows: 1 }"
              id="a-typography-paragraph-2"
              >[专业全能，飞傲 FII0 串流解码一体机S15正式上市][从设计到音质:艾索洛Eversol0 DMP-A6 Gen2数播</a-typography-paragraph
            >
          </a-flex>
          <a-list :data-source="list1" id="a-list-1">
            <template #renderItem="{ item, index }">
              <a-list-item class="!px-0 !border-0" :id="`a-list-item-1-${index}`">
                <a-typography-link href="#" class="!text-[#999] !flex items-center" :id="`a-typography-link-2-${index}`">
                  <a-typography-text
                    class="px-2 py-1 bg-[#E5E7E7] text-[12px] text-[#918F86]"
                    :id="`a-typography-text-1-${index}`"
                    :ellipsis="{ rows: 1 }"
                    >{{ item.indexLable }}</a-typography-text
                  >
                  <a-typography-text class="pl-2 text-[#918F86]" :id="`a-typography-text-2-${index}`" :ellipsis="{ rows: 1 }">{{
                    item.title
                  }}</a-typography-text>
                </a-typography-link>
              </a-list-item>
            </template>
          </a-list>
        </a-col>
      </a-row>
      <a-row id="a-row-2" class="!m-0" :gutter="20">
        <a-col :span="12" id="a-col-3">
          <a-typography-link href="#" id="a-typography-link-3">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/22/1000/200" :preview="false" id="a-image-2" />
          </a-typography-link>
        </a-col>
        <a-col :span="12" id="a-col-4">
          <a-typography-link href="#" id="a-typography-link-4">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/33/1000/200" :preview="false" id="a-image-3" />
          </a-typography-link>
        </a-col>
      </a-row>
    </a-flex>
    <a-row class="pt-1 !mx-0 pl-10 pr-10" id="a-row-3" :gutter="20">
      <a-col
        :span="4"
        class="flex items-center justify-center"
        :class="{ 'bg-[#fff]': index === list2.length - 1 }"
        id="a-col-5"
        v-for="(item, index) in list2"
        :key="index"
      >
        <a-typography-link href="#" class="my-2" :id="`a-typography-link-5-${index}`">
          <a-typography-paragraph
            class="text-[#fff] !m-0"
            :class="{ '!text-[#6C6D6C]': index === list2.length - 1 }"
            id="a-typography-paragraph-3"
            >{{ item }}</a-typography-paragraph
          >
        </a-typography-link>
      </a-col>
    </a-row>
    <a-row class="!mx-0 py-2 bg-[#fff]" :gutter="10" :id="`a-row-4`">
      <a-col :span="8" :id="`a-col-6-${index}`" v-for="(item, index) in list3" :key="index">
        <a-flex class="mb-6" :id="`a-flex-4-${index}`">
          <a-typography-link href="#" :id="`a-typography-link-6-${index}`">
            <a-image :src="item.img" :preview="false" class="aspect-[2/1]" :id="`a-image-4-${index}`" />

            <a-typography-title :level="5" class="!text-[#5D5098]" id="a-typography-title-2">{{ item.title }}</a-typography-title>
            <a-typography-paragraph class="text-[12px] text-[#6C6D6C] mt-[20px] !m-0" id="a-typography-paragraph-4">{{
              item.subTitle
            }}</a-typography-paragraph>
          </a-typography-link>
        </a-flex>
      </a-col>
    </a-row>
    <a-flex vertical="column" class="!bordr-0 pb-4 bg-[#fff]" id="a-flex-5">
      <a-typography-paragraph class="px-3 !m-0 font-bold" id="a-typography-paragraph-5">品牌商：</a-typography-paragraph>
      <a-divider class="!mt-0 !mb-2" id="a-divider-1" />

      <a-flex wrap gap="small" id="a-flex-7">
        <a-image v-for="(item, index) in list4" :key="index" :src="item" :preview="false" :id="`a-image-5-${index}`" />
      </a-flex>
    </a-flex>
    <a-flex vertical="column" class="!bordr-0 pb-1 bg-[#fff]" id="a-flex-8">
      <a-typography-paragraph class="px-3 !m-0 font-bold" id="a-typography-paragraph-6">友情链接：</a-typography-paragraph>
      <a-divider class="!mt-0 !mb-2" id="a-divider-2" />

      <a-flex class="flex-wrap" gap="small" id="a-flex-10">
        <a-typography-paragraph v-for="(item, index) in list5" :key="index" class="px-3 !m-0 text-[12px]" id="a-typography-paragraph-7">{{
          item
        }}</a-typography-paragraph>
      </a-flex>
    </a-flex>
  </div>
</template>

<script setup>
const list1 = [
  {
    title: '流媒体本地播放解码耳放一体机，飞做K17正式上市!',
    date: '03-03',
    index: 1,
    indexLable: '资讯',
  },
  {
    title: '很大的惊喜--千元机 飞微t1pro',
    date: '02-25',
    index: 2,
    indexLable: '台式系统',
  },
  {
    title: '最近办公室多了个山灵S0小音箱，感觉不错',
    date: '02-21',
    index: 3,
    indexLable: '论坛精选',
  },
  {
    title: '全面升级--Innuos音若思新一代数播ZEN NG/ZENith NG',
    date: '02-21',
    index: 4,
    indexLable: '资讯',
  },
  {
    title: '我踩坑了，买了对假的世霸小情人，与大家分享',
    date: '02-21',
    index: 5,
    indexLable: '资讯',
  },
  {
    title: '从设计到音质:艾索洛Eversolo DMP-A6 Gen2数播解码一体机全新上市',
    date: '02-21',
    index: 6,
    indexLable: '资讯',
  },
];
const list2 = ['最近更新', '台式耳机系统', '随身耳机系统', '音响系统', '音乐与唱片', '无线耳机与音响'];

const list3 = [
  {
    img: 'https://picsum.photos/id/1/1000/800',
    title: '法国帝瓦雷技术加持下的华为Sound音箱',
    subTitle:
      '2019年华为和法国帝瓦雷合作、推出Sound X无线音频圈里的大事，甚至引起了不少音响发烧友的关注。我是当时第一时间把玩、评测的，也参加了上海的产品发布会。我之后也罢Sound X音响......',
  },
  {
    img: 'https://picsum.photos/id/2/1000/800',
    title: '会调声 和 硬素质 -- 两对小蓝牙音箱',
    subTitle:
      '首先说下这篇帖子写的东西是比较Low的，喜欢看中高档设备的，估计不感兴趣。 起因是有人发了这个美国BOSE的蓝牙音箱Soundlink Revolve+，外表象保温杯一样的电池供电、带把手的便携式蓝牙音......',
  },
  {
    img: 'https://picsum.photos/id/3/1000/800',
    title: '华为Sound音箱发布会上的专访(华为支浩帝瓦雷胡亦峰)',
    subTitle:
      '前言:对华为、华为Sound高端智能音箱、帝瓦雷感兴趣的，可以读读这篇专访。文字是我根据速记稿整理的。关于华为Sound高端只能音响的发布会专访 时间：2020年10月30（周五）下午地点......',
  },
  {
    img: 'https://picsum.photos/id/4/1000/800',
    title: '京东HiFi音频自营店上线了，能解决小白发烧友遇到的问题吗?',
    subTitle:
      '记得在两年前，我在做手机编辑时候，有幸参加了手机战略发布会，结束后，我就在思考，这不就是在做「聚合营销」吗，当时京手机，针对品牌营销，推出了用户运营、流是运营、娱乐营铺、内容营销',
  },
  {
    img: 'https://picsum.photos/id/5/1000/800',
    title: '终极Hi-Fi系统达成(我的HiFi发烧历程)',
    subTitle:
      '本帖最后由 雷哥197597 于 2023-2-14 09:26 编辑 终极Hi-Fi系线达成(我的HIF发烧历程)作者:雷哥197597(一位虔诚的音和音响发烧友)2023.2.......',
  },
  {
    img: 'https://picsum.photos/id/6/1000/800',
    title: 'UM的圈铁3单元真无线耳塞30X、飞利浦TAT8505真无线耳塞',
    subTitle:
      '开箱一只UM出品的圈铁结构真无线耳塞TWS-30X，每边的耳塞结构为一圈二铁3单元--动圈低音单元、动铁中音单元动铁高育单元。现在TWS满世界都是，但UM一贯的卖点是音质，且让我慢细早一下这......',
  },
  {
    img: 'https://picsum.photos/id/7/1000/800',
    title: '全面升级!智能降噪真无线耳机新标杆，索尼WF-1000XM4体验',
    subTitle:
      '无线耳机目前已经成为很多人生活不可或缺的一部分，尤其是这两年在手机无孔化的趋势加持下，无线耳机更是迎来了产品发布的一次大高潮，而其中在潮头时刻保持领先的品牌，毫无疑问应该是索尼......',
  },
  {
    img: 'https://picsum.photos/id/8/1000/800',
    title: '歌德GW100评测:歌德味浓郁，蓝牙平平。对HRS1i, MPROe',
    subTitle:
      '歌德GW100已经出来挺久了，评测不多，但评价还普遍不错，入了一只试试。 外观上整体造型是歌德细节却不同。美国手工造的歌德是“傻大黑粗”的粗犷风格，用料厚实。GW100细节却不乏精细，单端......',
  },
  {
    img: 'https://picsum.photos/id/9/1000/800',
    title: '骨传导耳机怎样?',
    subTitle:
      '这两年陆续有厂家推出骨传导耳机，说对耳朵伤害没那么大，还很方便。是真的没多少伤書?它的音质怎样?还可以吗?当然，这个评判可以分接打电话和听音乐两种场合的。......',
  },
  {
    img: 'https://picsum.photos/id/10/1000/800',
    title: '论坛几乎没人说，还是稍微说说吧，歌德GT220',
    subTitle:
      '去年就出来了，但我有这个ECHOBOX的有线蓝牙，都是美国声，我也是犹豫了好长时间才决定对比一下的。都是美国声，就剩下对比有线和真无线的区别了。确实，两者的风格非常一致，简直就是一样的......',
  },
  {
    img: 'https://picsum.photos/id/11/1000/800',
    title: 'ag cotsubu 尝鲜',
    subTitle:
      '突然看见论坛上有ag蓝牙耳机发新品的消息，样子真是可爱呀。想了想决定联系一下大佬看看能不能早弄一个来，没想到大佬说：你这次可是来晚了呀，我手里好几个颜色都已经被抢光了呀，嗯，无论如何......',
  },
  {
    img: 'https://picsum.photos/id/12/1000/800',
    title: 'GRADO GT220:美国歌德的真无线首发',
    subTitle:
      '现在真无线再安品巡榜得全耳机广家的定置品、样，都要出，因为市场接受度实在是高。其实对于蓝牙无线耳机而言我个人倾向于左右带连线的那种，无论是项圈式还是连线式，因为声音更容易做好，避免......',
  },
];

const list4 = [
  'https://picsum.photos/id/11/100/50',
  'https://picsum.photos/id/22/100/50',
  'https://picsum.photos/id/33/100/50',
  'https://picsum.photos/id/44/100/50',
  'https://picsum.photos/id/55/100/50',
  'https://picsum.photos/id/66/100/50',
  'https://picsum.photos/id/77/100/50',
  'https://picsum.photos/id/88/100/50',
  'https://picsum.photos/id/99/100/50',
];

const list5 = [
  '家电论坛',
  '天龙音响',
  '耳机·中国-安润公司',
  '家电联盟',
  'PCHome音频频道',
  'NUxUs',
  'Silent Angel',
];
</script>
<style></style>
